<template>
  <a-form layout="inline" class="accept_more_operate_moreForm">
    <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse" expandIconPosition="right">
      <a-collapse-panel key="1" style="font-weight: bold">
        <div slot="header" class="accept_more_operate_moreForm_collapse_head">
          <a-row :gutter="48" style="width: 100%">
            <a-col @click.stop="() => {}" :md="8" :sm="24">
              <a-form-item label="申请人：">
                <a-input v-model="queryParam.applyname" placeholder="请输入申请人" allowClear />
              </a-form-item>
            </a-col>
            <a-col @click.stop="() => {}" :md="8" :sm="24">
              <a-form-item label="被申请人：">
                <a-input v-model="queryParam.targetname" placeholder="请输入被申请人" allowClear />
              </a-form-item>
            </a-col>
            <a-col @click.stop="() => {}" :md="8" :sm="24">
              <a-form-item label="程序类型：">
                <a-select
                  v-model="queryParam.proctype"
                  style="width: 200px; font-weight: normal"
                  placeholder="请选择程序类型"
                  allowClear
                >
                  <a-select-option v-for="item in Tp_apptypeList" :key="item.value" :value="item.value">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">
          <a-col @click.stop="() => {}" :md="8" :sm="24">
            <a-form-item label="来源：">
              <a-select
                v-model="queryParam.source"
                style="width: 220px; font-weight: normal"
                placeholder="请选择来源"
                allowClear
              >
                <a-select-option v-for="item in Tp_applysourceList" :key="item.value" :value="item.value">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col @click.stop="() => {}" :md="12" :sm="24">
            <a-form-item label="申请时间：">
              <a-date-picker
                v-model="queryParam.applyStartDate"
                :style="{ width: 'calc(50% - 10px)' }"
                placeholder="开始日期"
                format="YYYY-MM-DD"
                allowClear
                @change="subtimeListen()"
              />
              ~
              <a-date-picker
                v-model="queryParam.applyEndDate"
                :style="{ width: 'calc(50% - 12px)' }"
                placeholder="结束日期"
                format="YYYY-MM-DD"
                allowClear
                @change="subtimeListen()"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
  </a-form>
</template>
<script>
import { Tp_apptypeList } from '@/enumeration/Tp_apptype.js'
import { Tp_applysourceList } from '@/enumeration/Tp_applysource'
export default {
  props: {
    queryParam: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      Tp_applysourceList: Tp_applysourceList,
      Tp_apptypeList: Tp_apptypeList,
      collapseKey: [1] // 折叠面板key
    }
  },
  created () {},
  methods: {
    // 接收时间监听判断开始结束日期是否合理
    subtimeListen () {
      if (
        this.queryParam.applyStartDate > this.queryParam.applyEndDate &&
        this.queryParam.applyStartDate &&
        this.queryParam.applyEndDate
      ) {
        this.queryParam.applyStartDate = undefined
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
